<template>
  <div id="dashboard-container">

    <panel-group @handleSetLineChartData="handleSetLineChartData" :cur-year="form.year"/>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-select v-model="form.year" placeholder="请选择年份" @change="changeYear">
        <el-option v-for="item in years" :label="item" :value="item"></el-option>
      </el-select>
      <line-chart :chart-data="lineChartData" :cur-year="form.year" :material="fossiFuelList" v-if="f1(lineChartData)"/>
      <line-chart1 :chart-data="lineChartData" :cur-year="form.year" :material="industryProduceList"
                   v-if="f2(lineChartData)"/>
      <LineChart2 :chart-data="lineChartData" v-if="f3(lineChartData)"/>
      <LineChart3 :chart-data="lineChartData" :cur-year="form.year" :material="fixCarbonList" v-if="f4(lineChartData)"/>

      <div class="block" style="margin-left: 20px">
        <el-date-picker
          v-model="monthRange"
          value-format="yyyy-MM"
          @change="changeRange"
          type="monthrange"
          :clearable="false"
          range-separator="至"
          start-placeholder="开始年份"
          end-placeholder="结束年份">
        </el-date-picker>
      </div>
    </el-row>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart :cur-year="monthRange"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart :cur-year="monthRange"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart :cur-year="monthRange"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import GithubCorner from '@/components/GithubCorner'
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import LineChart1 from "@/views/carbon-manage/data/components/LineChart1";
import LineChart2 from "@/views/carbon-manage/data/components/LineChart2";
import LineChart3 from "@/views/carbon-manage/data/components/LineChart3";
import RaddarChart from './components/RaddarChart'
import PieChart from './components/PieChart'
import BarChart from './components/BarChart'
import TransactionTable from './components/TransactionTable'
import TodoList from './components/TodoList'
import BoxCard from './components/BoxCard'
import {getAllYears, listYearVaryMaterialOneTo12CO2, queryStageMonthRangeCO2} from "@/api/carbon-manage/data";
import {
  listAllElectricHeat,
  listAllFixCarbon,
  listAllFossiFuel,
  listAllIndustryProduce
} from "@/api/carbon-manage/material";

const lineChartData = {
  fossiFuelInfo: [],
  newVisitis: {
    anthraciteData: [100, 120, 161, 134, 105, 160, 165, 120, 82, 91, 154, 162],//无烟煤
    bituminousCoalData: [120, 82, 91, 154, 162, 140, 145, 100, 120, 161, 134, 105],//烟煤
    cokeData: [120, 82, 91, 154, 162, 140, 145, 100, 120, 161, 134, 105],   //焦炭
    dieselOilData: [180, 160, 151, 106, 145, 1150, 130, 82, 91, 154, 162, 140],//柴油
    LiquefiedPetroleumGasData: [120, 82, 91, 154, 162, 140, 145, 100, 120, 161, 134, 105],//液化石油汽
    BlastFurnaceGasData: [120, 82, 91, 154, 162, 140, 145, 100, 120, 161, 134, 105],//高炉煤气
    ConverterGasData: [120, 82, 91, 154, 162, 140, 145, 100, 120, 161, 134, 105],//转炉煤气

  },
  messages: {
    dolomiteData: [180, 160, 151, 106, 145, 150, 130, 82, 91, 154, 162, 140],//白云石
    HighMagnesiumPowderData: [120, 82, 91, 154, 162, 140, 145, 100, 120, 161, 134, 105],//高镁粉
    electrodeData: [200, 192, 120, 144, 160, 130, 140, 120, 161, 134, 105, 160],//电极
    pigIronData: [180, 160, 151, 106, 145, 150, 130, 82, 91, 154, 162, 140],//生铁
    FerrochromeAlloyData: [200, 192, 120, 144, 160, 130, 140, 120, 161, 134, 105, 160]//铬铁合金
  },
  purchases: {
    powerData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],//电力
    heatingPowerData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],//热力
  },
  shoppings: {
    crudeSteelData: [200, 192, 120, 144, 160, 130, 140, 120, 161, 134, 105, 160],//粗钢
    pigIronData: [180, 160, 151, 106, 145, 150, 130, 82, 91, 154, 162, 140],//生铁
  }
}

export default {
  name: 'index',
  components: {
    GithubCorner,
    PanelGroup,
    LineChart,
    LineChart1,
    LineChart2,
    LineChart3,
    RaddarChart,
    PieChart,
    BarChart,
    TransactionTable,
    TodoList,
    BoxCard
  },
  data() {
    return {
      lineChartData: lineChartData,
      form: {
        year: 2024,
        stage: '3'
      },
      map: [],
      years: [],
      flag1: true,
      flag2: false,
      flag3: false,
      flag4: false,
      fossiFuelList: [],
      industryProduceList: [],
      electricHeatList: [],
      fixCarbonList: [],
      fun3Data: [],
      monthRange: [],
      rangeData: [],

    }
  },
  created() {
    getAllYears().then(res => {
      this.years = res.data
    });
    let endYear = new Date().getFullYear();
    this.monthRange = [endYear - 5 + '-01', endYear + '-12'];
  },
  async mounted() {
    await listAllElectricHeat().then(res => {
      this.electricHeatList = res.data;
    })
    await listAllIndustryProduce().then(res => {
      this.industryProduceList = res.data;
    })
    await listAllFixCarbon().then(res => {
      this.fixCarbonList = res.data;
    })
    await listAllFossiFuel().then(res => {
      this.fossiFuelList = res.data;
    });

    localStorage.setItem("stage", "1");
    await this.handleSetLineChartData("newVisitis");

  },
  methods: {
    changeRange() {
      // queryStageMonthRangeCO2({begin: this.monthRange[0], end: this.monthRange[1]}).then(res => {
      //   console.log(res.data);
      // })
    },
    async fun3() {
      await listYearVaryMaterialOneTo12CO2(this.form).then(res => {
        this.fun3Data = res.data.list
      });
      console.log(this.fun3Data)

      let electricArr = [];
      let heatArr = [];
      if (this.fun3Data[0][0].name === '电力') {
        electricArr = this.fun3Data[0].map(item => {
          return item.carbonEmission;
        });
      } else {
        heatArr = this.fun3Data[0].map(item => {
          return item.carbonEmission;
        });
      }
      if (this.fun3Data[1][1].name === '电力') {
        electricArr = this.fun3Data[1].map(item => {
          return item.carbonEmission;
        });
      } else {
        heatArr = this.fun3Data[1].map(item => {
          return item.carbonEmission;
        });
      }

      this.lineChartData.powerData = electricArr;
      this.lineChartData.heatingPowerData = heatArr;
    },
    f3(lineChartData) {
      if (lineChartData.powerData != null) {
        this.form.stage = '3'
        if (!this.flag3) {
          this.fun3();
          this.flag3 = true //让fun3()只执行一次
        }
        return true
      }
      return false
    },
    f1(lineChartData) {
      if (lineChartData.anthraciteData) {
        this.form.stage = '1'
        if (!this.flag1) {
          this.fun1();
          this.flag1 = true //让fun3()只执行一次
        }
        return true
      }
      return false;
    },
    fun1() {
      listYearVaryMaterialOneTo12CO2(this.form).then(res => {
        this.lineChartData.fossiFuelInfo = res.data.list;
      });
    },
    f2(lineChartData) {
      if (lineChartData.dolomiteData != null) {
        this.form.stage = 2
        if (!this.flag2) {
          this.fun2();
          this.flag2 = true
        }
        return true
      }
      return false
    },
    fun2() {
      listYearVaryMaterialOneTo12CO2(this.form).then(res => {
        this.lineChartData.fossiFuelInfo = res.data.list;
      });
    },
    f4(lineChartData) {
      if (lineChartData.crudeSteelData != null) {
        this.form.stage = 4
        if (!this.flag4) {
          this.fun4();
          this.flag4 = true
        }
        return true
      }
      return false
    },
    fun4() {
      listYearVaryMaterialOneTo12CO2(this.form).then(res => {
        this.lineChartData.fossiFuelInfo = res.data.list;
      });
    },
    changeYear() {
      this.form.stage = localStorage.getItem("stage")
      this.flag1 = false
      this.flag2 = false
      this.flag3 = false
      this.flag4 = false
      this.map = []
      if (parseInt(this.form.stage) === 3) {
        this.fun3();
      } else if (parseInt(this.form.stage) === 1) {
        this.fun1();
      } else if (parseInt(this.form.stage) === 2) {
        this.fun2();
      } else if (parseInt(this.form.stage) === 4) {
        this.fun4();
      }
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
      this.changeYear();
    },
  },

}
</script>

<style scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
}

.github-corner {
  position: absolute;
  top: 0px;
  border: 0;
  right: 0;
}

.chart-wrapper {
  background: #fff;
  padding: 16px 16px 0;
  margin-bottom: 32px;
}


@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
